﻿<!DOCTYPE>

<html>
<head>
    <title></title>
    <script type="text/javascript">
        window.onload = function () {
            var dropbox = document.body;
            dropbox.addEventListener("dragenter", dragenter, false);
            dropbox.addEventListener("dragover", dragover, false);
            dropbox.addEventListener("drop", drop, false);
        }
        function dragenter(e) {
            e.stopPropagation();
            e.preventDefault();
        }

        function dragover(e) {
            e.stopPropagation();
            e.preventDefault();
        }
        function drop(e) {
            e.stopPropagation();
            e.preventDefault();

            var dt = e.dataTransfer;
            var files = dt.files;

            handleFiles(files);
        }
        function handleFiles(files) {
            for (var i = 0; i < files.length; i++) {
                var file = files[i];
                var imageType = /image.*/;

                if (!file.type.match(imageType)) {
                    continue;
                }

                var img = document.createElement("img");
                img.style.width = "300px";
                img.src = window.URL.createObjectURL(file);
                document.body.appendChild(img);

                //var reader = new FileReader();
                //reader.onload = (function (aImg) { return function (e) { aImg.src = e.target.result; }; })(img);
                //reader.readAsDataURL(file);
            }
        }
    </script>
</head>
<body draggable="true" dropzone="body">
    <div>把图片拖放到页面里面,查看效果</div>
</body>
</html>
